<template>
    <div class="page">
        <el-container style="  height: 1300px; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246); ">
                <el-menu :default-openeds="['1', '3']" :router="true">
                    <div class="lefttop">智能内容创意平台</div>
                    <el-menu-item index="/work"><i class="el-icon-s-home"></i>工作台</el-menu-item>
                    <el-menu-item index="/manage"><i class="el-icon-s-custom"></i>客户管理</el-menu-item>
                    <el-menu-item index="/material"><i class="el-icon-s-management"></i>素材管理</el-menu-item>
                    <el-menu-item index="/report"><i class="el-icon-s-order"></i>查看报告</el-menu-item>
                    <!-- <el-menu-item index="/idea"><i class="el-icon-s-opportunity"></i>生成创意</el-menu-item> -->
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <div class="left" style="float: left">首页/工作台</div>
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right: 15px;float: right"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人信息</el-dropdown-item>
                            <el-dropdown-item>账户余额</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>用户名</span>
                </el-header>
                <!-- 路由容器 -->
                <router-view></router-view>
            </el-container>

        <!-- 底部栏 -->
     
        </el-container>
  
        <div class="footer">
            <div class="textup">
                <span class="tet">帮助</span>
                <span class="tet">隐私</span>
                <span class="tet">条款</span>
            </div>
    
            <div class="textdown">
              <div>copyright@</div>
              <div>2017 蚂蚁金服体验技术部出品</div>
            </div>
        </div>
    


    </div>
</template>

<script>
    export default {
        name: 'Page',
        data() {
            return {
            };
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .el-header {
        background-color: rgb(236, 241, 247);
        color: rgb(122, 102, 102);
        line-height: 60px;
    }

    .el-aside {
        color: #333;
        height: 1300px;
    }

    .lefttop {
        width: 200px;
        height: 60px;
        background: black;
        opacity: 0.4;
        text-align: center;
        line-height: 60px;
        color: white;
    }

    .page {
        overflow: hidden;
        height: 1700px;
    }
     
     /* 底部 */
  .textup {
        width: 235px;
        height: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        color: gray;
    }

    .tet {
        line-height: 25px;
        width: 30%;
    }

    .textdown {
        width: 335px;
        height: 25px;
        margin: auto;
        display: flex;
        color: gray;
    }
    .footer {
        height: 400px;
        background: #eee;
    }


</style>